<template>
	<a-upload v-if="props.uploadMode === 'defaults'" v-model:file-list="fileList" name="files" :multiple="true"
		:action="action" :headers="headers" :maxCount="props.uploadNumber" @change="handleChange"  @remove="(()=>{return !isShow})">
		<a-button v-if="!isShow">
			<upload-outlined />
			上传
		</a-button>
	</a-upload>

	<a-upload-dragger v-if="props.uploadMode === 'drag'" v-model:fileList="fileList" name="files" :multiple="true"
		:action="action" :headers="headers" :maxCount="props.uploadNumber" @change="handleChange">
		<p class="ant-upload-drag-icon">
			<inbox-outlined />
		</p>
		<p class="ant-upload-text">单击或拖动文件到此区域上传</p>
		<p class="ant-upload-hint"></p>
	</a-upload-dragger>
	<div v-show="false">	{{ formattedFiles }}</div>
</template>

<script setup name="uploadIndex">
import tool from '@/utils/tool'
import sysConfig from '@/config/index'
const fileList = ref([])
const emit = defineEmits({ uploadDone: null })
const headers = ref({
	token: tool.data.get('TOKEN')
})
const props = defineProps({
	action: {
		type: String,
		default: '/api/webapp/dev/file/uploadDynamicReturnIds',
		required: false
	},
	// 上传方式 defaults || drag
	uploadMode: {
		type: String,
		default: 'defaults',
		required: false
	},
	// 上传数量
	uploadNumber: {
		type: Number,
		default: 1,
		required: false
	},
	type: {
		type: Number,
		default: 1,
		required: false
	},
	files: {
		type: Array,
		default: [],
		required: false
	},
	isShow: {
	    type:Boolean,
		default:false,
		required: false
	}
})
const action = sysConfig.API_URL + props.action

// 上传时间，构造上传数组，主动推送至调用组件，单文件可以使用
const handleChange = () => {
	// 单个文件可以使用回调方法，多个文件建议主动获取
	let result = []
	for (let a = 0; a < props.uploadNumber; a++) {
		const file = fileList.value[a]
		if (file && file.status === 'done' && file.response && file.response.code === 200) {
			const resultObj = {
				fileName: file.name,
				fileId: file.response.data[0],
				type: props.type
			}
			result.push(resultObj)
		}
	}
	if (result.length == fileList.value.length) {
		emit('uploadDone', result)
	}
}
// 通过DOM获取上传的文件
const getFiles = () => {
	console.log(fileList.value)
	if (fileList.value) {
		const result = []
		// 只返回这些就够用了，其他基本用不到
		fileList.value.forEach((item) => {
			const obj = {
				fileName: item.fileName,
				type: props.type,
				fileId: file.response.data[0]
			}
			result.push(obj)``
		})
		return result
	} else {
		return []
	}
}
const clear = () => {
	fileList.value = []
}
// const bind = (files) => {
// 	fileList.value = files?.map((file) => {
// 		return {
// 			uid: file.fileId,
// 			name: file.name,
// 			status: 'done',
// 			url: 'http://www.baidu.com/zzz.png',
// 			response: { data: [file.fileId] }
// 		}
// 	})
// }

// 在这里定义计算属性来对传入的props进行格式化
const formattedFiles = computed(() => {
	fileList.value = props.files?.map((file) => {
		return {
			uid: file.fileId,
			name: file.fileName??"文件无名称",
			status: 'done',
			url: file.downloadPath??"",
			response: { data: [file.fileId] }
		}
	})
});
// 抛出这个获取文件列表的方法
defineExpose({
	getFiles,
	clear,
})
</script>
